<template>
  <!-- 搜索后展示的商品 -->
  <div>
    <!-- title -->
    <div
      style="
        font-size: 14px;
        padding-top: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ccc;
      "
    >
      <div style="display: flex">
        <!-- 左边 -->
        <div style="display: flex; gap: 5px">
          <span style="display: flex; align-items: center">默认</span><span>|</span>
          <span style="display: flex; align-items: center">销量</span
          ><a class="el-icon-caret-top"></a>
          <span>|</span>
          <a style="display: flex; align-items: center">价格</a
          ><i class="el-icon-caret-top"></i><span>|</span>
        </div>

        <!-- 右边 -->
        <div style="margin-left: auto; display: flex; gap: 10px">
          <div>
            <span style="color: #999999"
              >共<strong style="color: #222222">1294</strong>件商品</span
            >
          </div>
          <div style="color: red">1/ <span>65</span></div>
          <div
            class="right"
            style="
              border: 1px solid #aaaaaa;
              width: 30px;
              height: 20px;
              text-align: center;
            "
          >
            <i class="el-icon-arrow-left"></i>
          </div>
          <div
            class="right"
            style="
              border: 1px solid #aaaaaa;
              width: 30px;
              height: 20px;
              text-align: center;
            "
          >
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品 -->

<div class="shadow-bg" >
  <div class="img_bj" v-for="(item, index) in imgList" :key="index">

      <div style="display: flex; justify-content: center">
        <img
          style="width: 200px; width: 200px; padding-top: 10px"
          :src="item.image"
          alt=""
        />
      </div>

      <div style="margin-left: 25px; width: 160px">
        <div style="color: #e4393c; padding-top: 5px; padding-bottom: 5px">
          ￥<span style="font-size: 20px; padding-left: 5px"
            >{{ item.price }}.00</span
          >
        </div>

        <div style="font-size:12px; width:100%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis;">{{ item.name }}{{ item.spec }}</div>

        <div style="color: #aaaaaa; font-size: 12px; padding-top: 5px">
          <span
            v-if="item.commentCount < 10000"
            style="color: #646fb0; font-weight: bold"
            >{{ item.commentCount }}+</span
          >
          <span v-else style="color: #646fb0; font-weight: bold"
            >{{ item.commentCount / 10000 }}万+</span
          >
          条评价
        </div>

        <div style="color: #aaaaaa; font-size: 12px; padding-top: 5px">
          最近1个月销量 :
          <span
            v-if="item.sold < 10000"
            style="color: #646fb0; font-weight: bold"
            >{{ item.sold }}+</span
          >
          <span v-else style="color: #646fb0; font-weight: bold"
            >{{ item.sold / 10000 }}万+</span
          >
        </div>

        <div class="btn_div" style="display: flex; gap: 5px; padding-top: 5px">
          <a href="" class="btn" >立刻购买</a
          >
          <a href="javascript:void(0)" @click="addCart(index)" class="btn"  >加入购物车</a
          >
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>

export default {
  props: ['imgList'],
  data () {
    return {
      obj: []
    }
  },
  methods: {

    // 添加购物车
    addCart (index) {
      this.$store.dispatch('m_cart/addCartDada', this.imgList[index])
    }
  }
}
</script>

<style lang="less" scoped>
.right {
  border: 1px solid #aaaaaa;
  width: 30px;
  height: 20px;
  text-align: center;
}
.right:hover {
  background: red;
  color: white;
}
/* 阴影背景 */
.shadow-bg {

  margin-top: 10px;

  font-size: 14px;

  display: flex;
  gap: 10px;
}

.img_bj{

  width: 210px;
  background: white;
  border-radius: 5px;
  border-left: 1px solid #ccccccb3;
  border-right: 1px solid #ccccccb3;
  border-top: 1px solid #ccccccb3;
  border-bottom: 1px solid #ccccccb3;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding-bottom: 20px;
}
.btn{
  border: 1px solid #e4393c;
              width: 84px;
              height: 20px;
              text-align: center;
              color: #e4393c;
}
.btn:hover{
  background: #e4393c;
  color: white;
}
</style>
